<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>汇总统计</title>
<% request.setAttribute("menu", 1); %>
<%@ include file="/WEB-INF/page/public/contentmeta.jsp"%>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="<%=basePath%>css/global.css" media="all" />
<link rel="stylesheet" href="<%=basePath%>plugins/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" href="<%=basePath%>css/system.css" media="all"/>
<link rel="stylesheet" href="<%=basePath%>css/tab.css" media="all" />

<script type="text/javascript" src="<%=basePath%>js/echarts.js"></script>


</head>
<body>

<div class="admin-tab admin-user">
	<div class="tab-condition">
		<form class="layui-form clefix">
			<div class="layui-form-item">
				<div class="layui-input-block">
					<select name="starttime" id="starttime" value="${starttime}" lay-filter="type">
						<option value="">请选择开始时间</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<select name="endtime" id="endtime" value="${endtime}" lay-filter="type">
						<option value="">请选择结束时间</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<input type="hidden" id="start" value="${starttime}">
				<input type="hidden" id="end" value="${endtime}">
				<input type="hidden" id="nowtime" value="${nowtime}">
				<input type="hidden" id="begintime" value="${begintime}">
				<!-- 标记 1年视图 2月视图 3日视图 -->
				<input type="hidden" id="sign" value="${sign}">
				<!-- 标记，当前选中的年份 -->
				<input type="hidden" id="yearsign" value="${nowtime}">
				<button class="layui-btn TM-btn-search searchbtn" lay-submit="" lay-filter="demo2" type="button"><i class="layui-icon layui-unselect layui-tab-close">&#xe615;</i>搜索</button>
			</div>
		</form>
	</div>
	<div  class="layui-field-box">
		<div id="chart" style="width: 95%;height: 660px;"></div>
	</div>
</div>

<script type="text/javascript">

	layui.use(['laytpl','form','layer'], function() {
		
		var $ = layui.jquery;
		var layer = layui.layer;
		var form = layui.form();
		var laytpl = layui.laytpl;
		
		//获取参数
	  	var starttime = $("#start").val(); //开始年份
	  	var endtime = $("#end").val(); //结束年份
	  	var nowtime = $("#nowtime").val(); //当前年份
	  	var begintime = $("#begintime").val(); //默认开始年份
	  	
	  	//开始时间的下拉列表
	  	var starthtml = year_select.getyearlist(begintime,nowtime,starttime);
	  	//结束时间的下拉列表
		var endhtml = year_select.getyearlist(begintime,nowtime,endtime);
	  	
	  	$("#starttime").html(starthtml);
	  	$("#endtime").html(endhtml);
	  	
	  	//更新渲染
	  	form.render();
		
		
		//引入Echarts
		var myChart = echarts.init(document.getElementById('chart'));
		
		//设置加载
		myChart.showLoading();
		
		//定义位置列表
		/* var posList = [
			'left', 'right', 'top', 'bottom', 'inside',
			'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
			'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
		]; */
		
		//定义右上部分文字控制台参数
		/* myChart.configParameters = {
			rotate: {        //旋转角度
		        min: -90,
		        max: 90
		    },
		    align: {         //水平排列方式
		        options: {
		            left: 'left',
		            center: 'center',
		            right: 'right'
		        }
			},
			verticalAlign: {  //垂直排列方式
		        options: {
		            top: 'top',
		            middle: 'middle',
		            bottom: 'bottom'
		        }
			},
			position: {      //文字位置
		        options: echarts.util.reduce(posList, function (map, pos) {
		            map[pos] = pos;
		            return map;
		        }, {})
			},
			distance: {     //距离
		        min: 0,
		        max: 100
			}
		}; */
		
		//图表文字默认展示参数改变时运行这里
		myChart.config = {
			rotate: 90,
			align: 'left',
			verticalAlign: 'middle',
			position: 'insideBottom',
			distance: 15,
			onChange: function () {   //如果发生改变,就运行这个方法,获取改变后的参数,并重置图表文字
				var labelOption = { //获取参数
	    			normal: {
	        			rotate: myChart.config.rotate,
	        			align: myChart.config.align,
	        			verticalAlign: myChart.config.verticalAlign,
	        			position: myChart.config.position,
	        			distance: myChart.config.distance
	    			}
				};
		        myChart.setOption({ //传入,并改变图表
		            series: [{
		                label: labelOption
		            }, {
		                label: labelOption
		            }, {
		                label: labelOption
		            }, {
		                label: labelOption
		            }, {
		                label: labelOption
		            }]
		        });
			}
		};
		
		//设置默认文字样式
		var labelOption = {
		    normal: {
		        show: true, //文字是否可见
		        position: myChart.config.position, //文字位置
		        distance: myChart.config.distance, //距离
		        align: myChart.config.align, //水平
		        verticalAlign: myChart.config.verticalAlign, //垂直
		        rotate: myChart.config.rotate, //角度
		        formatter: '{c}  {name|{a}}',  //文字格式化 具体代表内容在各配置项中有介绍绍
		        fontSize: 16, //字体大小
		        rich: {  //设置样式
		            name: { //对应上面formatter的name
		                textBorderColor: '#999'
		            }
		        }
		    }
		};
		
		// 指定图表的配置项和数据
	    var option = {
	    	color: ['#003366', '#FF5722','#009688',  '#4cabce','#e5323e','#e5323e'], //柱状图颜色
	    	tooltip: {  //提示框组件
	            trigger: 'axis', //触发类型:坐标轴触发
	            axisPointer: { //坐标轴指示器配置项。
	                type: 'shadow' 
	            }
	        },
			title: { //标题
	            text: '综合统计'
	        },
	        legend: { //图例组件
	            data:['签单','付款','业绩','垫款','代办','报销']
	        },
	        toolbox: { //工具栏 支持自定义
	            show: true,
	            itemSize:20,
	            itemGap:20,
	            orient: 'vertical',
	            left: '93%',
	            top: 'center',
	            feature: {
	            	saveAsImage: {show: true},   //保存为图片
	            	dataView: {show: true, readOnly: false},  //数据视图工具
	            	// dataZoom: {show:true},    //缩放工具
	            	mark: {show: true},
	                magicType: {show: true, type: ['line']}, //动态类型切换
	                restore: {show: true},  //配置项还原
	                myTool2: {
	                    show: true,
	                    title: '返回上一级',
	                    icon: 'image:///images/return.png',
	                    onclick: function (){
	                    	var sign = $("#sign").val();
	                    	var yearsign = $("#yearsign").val();
	                    	if (sign == 3) {
	                    		//返回到月视图
	                    		$("#sign").val(2);
	                    		pushdata(yearsign,null ,1);
	                    	} else if (sign == 2) {
	                    		//返回到年视图
	                    		$("#sign").val(1);
	                    		pushdata(begintime,nowtime,4);
	                    	} 
	                    }
	                }
	            }
	        },
	        calculable: true, //日历坐标系组件
	        animation:true,  //开启动画
	        xAxis: [  //x轴
	            {
	                type: 'category', //time
	                axisTick: {show: false},
	                //data: ["01月","02月","03月","04月","05月","06月"
	                //	,"07月","08月","09月","10月","11月","12月"]
	                //data: xname
	            }
	        ],
	        yAxis: [ //y轴
	            {
	                type: 'value'
	            }
	        ],
	        dataZoom: [  //区域缩放组件
	        	
	        	{
	                type: 'inside', //组件类型 内置
	                xAxisIndex: [0],//控制x轴的哪一个轴线，因为可能有好几条轴，索引从0开始                
	                start: 1,
	                end: 100
	            },
	                     
	       	],
	        series: [
	        	{
	            	name: '签单',
	            	type: 'bar',
	            	barGap: 0,
	            	label: labelOption,
	            	data: [5, 8, 3, 11, 15, 12, 10, 7, 13, 15, 19, 17]
	        	},
	        	{
	            	name: '付款',
	            	type: 'bar',
	            	label: labelOption,
	            	data: [3, 10, 2, 12, 16, 15, 8, 5, 15, 17, 21, 18]
	        	},
	        	{
	            	name: '业绩',
	            	type: 'bar',
	            	label: labelOption,
	            	data: [1, 12, 3, 10, 12, 21, 10, 3, 18, 10, 26, 25]
	        	},
	        	{
	            	name: '垫款',
	            	type: 'bar',
	            	label: labelOption,
	            	data: [1, 1, 2, 1, 3, 1, 2, 0, 1, 0.5, 3, 5]
	        	},
	        	{
	            	name: '代办',
	            	type: 'bar',
	            	label: labelOption,
	            	data: [1, 0.5, 0, 1.5, 2, 1.5, 3, 0, 1.5, 2, 1, 1]
	        	},
	        	{
	            	name: '报销',
	            	type: 'bar',
	            	label: labelOption,
	            	data: [1, 0.5, 0, 1.5, 2, 1.5, 3, 0, 1.5, 2, 1, 1]
	        	}
	        ]
	    };
		
	  	//推送数据
	  	pushdata(starttime,endtime,3);
		
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
		
		
		//点击图表跳转到对应年月日视图
		myChart.on("click",function(params){
			var name = params.name;
			if(name.indexOf("年")>0) {
				//年，点进对应的月
				$("#sign").val(2);
				$("#yearsign").val(name.replace("年",""));
				pushdata(name.replace("年",""),null ,1);
			} else if (name.indexOf("月")>0) {
				//月，点进对应的日
				$("#sign").val(3);
				pushdata(starttime,name.replace("月","") ,2);
			}else {
				//日，啥也不用做
			}
		});
		
		
		
		
		//点击搜索
		$(".searchbtn").on("click",function(){
			
			//设置加载
			myChart.showLoading();
			
			var starttime = $("#starttime").val();
			var endtime = $("#endtime").val();
			
			if(starttime > endtime){
				//参数错误
				layer.msg("开始年份不能大于结束年份");
			} else if (starttime == endtime) {
				//月视图
				$("#sign").val(2);
				//设置年份选中标记
				$("#yearsign").val(starttime);
			} else {
				//年视图
				$("#sign").val(1);
			}
			
			//推送数据
			pushdata(starttime,endtime,3);
			
		});
		
		
		//推送数据的公共方法
		function pushdata(starttime,endtime,type){
			//利用ajax获取需要的参数，再传到表格中
			$.ajax({
				type: "post",
				data: {starttime:starttime,endtime:endtime,type:type},
				url: "/customer/statisticsdata",
				dataType: "json",
				success: function(data){
					
					//关闭加载图标
					 myChart.hideLoading();
					
					//传值
					myChart.setOption({
						title: { 
				            text: data.title[0]
				        },
				        legend: { //图例组件
				        	data:data.tl
				        },
						xAxis:[{
							data:data.name
						}],
						series:[{
							name: data.tl[0],
							data:data.qd
						},{
							name: data.tl[1],
							data:data.fk
						},{
							name: data.tl[2],
							data:data.sk
						},{
							name: data.tl[3],
							data:data.dk
						},{
							name: data.tl[4],
							data:data.db
						},{
							name: data.tl[5],
							data:data.bx
						}]
					});
				}
			});
		} 
		
	});
	
</script>

</body>
</html>